coverimage.js ➔ ??? - Code Metrics - Inspection of "Makes jquery dep explicit" - thisislawatts/coverimage - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Push — master ( af2b22...774afd )

by LA

created 2017-02-08 08:18 UTC

coverimage.js ➔ ??? C

↳ Parent: src/coverimage.js

Complexity

Conditions	9
Paths	44

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	11
Bugs	0	Features	0

Metric	Value
cc	9
c	11
b	0
f	0
nc	44
nop	2
dl	0
loc	81
rs	5.5727

1 Function

Rating	Name	Duplication	Size	Complexity
A	coverimage.js ➔ ... ➔ ???	0	3	1

How to fix Long Method

class CoverImage {

	constructor($el, cb) {

		const _this = this;

			_this.$el = $el ? jQuery($el) : jQuery(window);
			_this.$img = _this.getElementForSizing();
			_this.disableOnMobile = _this.$el.data('cover-image-mobile') === false;
			_this.cb = cb || (() => {
				//DEBUG console.log("Default callback");
			});
			_this.positioning = {
				x : 0.5,
				y : 0.5
			};
			_this.options = {
				parallax : _this.$el.data('coverImageParallax') === ''
			};

		if (!_this.$img) {
			console.log('Error:', 'no image found', _this.$img );

			return;
		}

		_this.imageWidth = _this.$img.attr('width');
		_this.imageHeight = _this.$img.attr('height');

		// If the image doesn't have harcoded width|height
		// attributes then load the image to calculate
		// the dimensions
		if (!_this.imageWidth || !_this.imageHeight) {
			console.log('No dimensions found. Generating image')
			_this.img = new Image();

			_this.img.src = _this.$img.attr('src');

			_this.imageWidth = _this.img.width;
			_this.imageHeight = _this.img.height;
		}

		if ( _this.disableOnMobile && window.innerWidth < 480 ) {
			return;
		}

		_this.elementDimensions = {
			height : _this.$el.outerHeight(),
			width  : _this.$el.outerWidth()
		};


		_this.$el.css({
			overflow : 'hidden',
			position : 'relative'
		});

		if (!_this.$img.length) {

			// TODO: Implement load
			setTimeout( () => {
				new CoverImage( _this.$el );

			}, 1000);

		} else {
			_this.resizeImage();
		}

		_this.$img.one('load', () => {
			console.log('Image loaded:', 'resize');

			_this.resizeImage();
		});

		$(window).on('resize', () => {
			_this.resizeImage();
		});

		$(window).on('ci.resize', () => {
			_this.resizeImage();
		});

		if (_this.options.parallax) {
			_this.draw();
		}
	}

	/**
	 * Parallax FX
	 *
	 */
	draw() {

		const _this = this;
		const friction = 0.5;
		const imageOffsetX = document.body.scrollTop * friction;
		const imageOffsetY = document.body.scrollTop * friction;
		const maximumMovementY = ( _this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
		const maximumMovementX = ( _this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;

		if ( maximumMovementX > 0 ) {
			if (imageOffsetX < maximumMovementX ) {
				// console.log('New position:', maximumMovementX - imageOffsetX);
				_this.$img.css({
					'transform': `translateX(${maximumMovementX - imageOffsetX}px)`
				});
			}

		} else {
			if ( imageOffsetY < maximumMovementY ) {
				_this.$img.css('transform', `translateY(${maximumMovementY - imageOffsetY}px)`);
			}
		}

		window.requestAnimationFrame(() => {
			_this.draw();
		});
	}

	getElementForSizing() {
		const _this = this;
		const selector = _this.$el.data('coverImageEl');

		if ( selector )  {

			console.log( 'Element selector Present', _this.$el.find( selector ) );


			return _this.$el.find( selector ) ? _this.$el.find( selector ) : _this.$el.find('img');
		}

		return _this.$el.find('img').first();
	}

	resizeImage() {
		const _this = this;
		const dimensions = _this.coverDimensions( _this.imageWidth, _this.imageHeight, _this.$el.outerWidth(), _this.$el.outerHeight() );

		_this.imageDimensions = dimensions;


		if ( isNaN( dimensions.width ) ) {
			console.log('Failed to calculate image sizes.');

		}

		_this.setImageSize();
	}

	setImageSize() {
		const _this = this;

		_this.$img.attr({
			'width'		: _this.imageDimensions.width,
			'height'	: _this.imageDimensions.height
		}).css({
			'position'	: 'absolute',
			'width'		: _this.imageDimensions.width,
			'height'	: _this.imageDimensions.height,
			'transform'		: _this.getTransform(
				( _this.$el.width() - _this.imageDimensions.width) * _this.positioning.y,
				( _this.$el.outerHeight() - _this.imageDimensions.height) * _this.positioning.x
			),
			'max-width'	: 'none'
		}).data('resrc-width', _this.imageDimensions.width);

		_this.$img.addClass('ci--sized');

		_this.cb();
	}

	getTransform(x, y) {
		return `translate3d(${x}px,${y}px,0)`;
	}

	coverDimensions(child_w, child_h, container_w, container_h) {
		const scale_factor = this.max( container_w / child_w, container_h / child_h );

		return {
			width: Math.ceil(child_w * scale_factor),
			height: Math.ceil(child_h * scale_factor)
		};
	}

	containDimensions(child_w, child_h, container_w, container_h) {
		const scale_factor = this.min( container_w / child_w, container_h / child_h );

		return {
			width: child_w * scale_factor,
			height: child_h * scale_factor
		};
	}

	min(a, b) {
		return a > b ? b : a;
	}

	max(a, b) {
		return a > b ? a : b;
	}
}

const elems = document.body.querySelectorAll('[data-cover-image]');

elems.forEach(el => {
	new CoverImage( jQuery(el) );

});


1		class CoverImage {
2
3		constructor($el, cb) {
4
5		const _this = this;
6
7		_this.$el = $el ? jQuery($el) : jQuery(window);
8		_this.$img = _this.getElementForSizing();
9		_this.disableOnMobile = _this.$el.data('cover-image-mobile') === false;
10		_this.cb = cb \|\| (() => {
11		//DEBUG console.log("Default callback");
12		});
13		_this.positioning = {
14		x : 0.5,
15		y : 0.5
16		};
17		_this.options = {
18		parallax : _this.$el.data('coverImageParallax') === ''
19		};
20
21		if (!_this.$img) {
22		console.log('Error:', 'no image found', _this.$img );
		0 ignored issues – show Debugging Code introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
23		return;
24		}
25
26		_this.imageWidth = _this.$img.attr('width');
27		_this.imageHeight = _this.$img.attr('height');
28
29		// If the image doesn't have harcoded width\|height
30		// attributes then load the image to calculate
31		// the dimensions
32		if (!_this.imageWidth \|\| !_this.imageHeight) {
33		console.log('No dimensions found. Generating image')
34		_this.img = new Image();
		0 ignored issues – show Bug introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report The variable `Image` seems to be never declared. If this is a global, consider adding a `/** global: Image */` comment. This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed. To learn more about declaring variables in Javascript, see the MDN. Loading history...
35		_this.img.src = _this.$img.attr('src');
36
37		_this.imageWidth = _this.img.width;
38		_this.imageHeight = _this.img.height;
39		}
40
41		if ( _this.disableOnMobile && window.innerWidth < 480 ) {
42		return;
43		}
44
45		_this.elementDimensions = {
46		height : _this.$el.outerHeight(),
47		width : _this.$el.outerWidth()
48		};
49
50
51		_this.$el.css({
52		overflow : 'hidden',
53		position : 'relative'
54		});
55
56		if (!_this.$img.length) {
57
58		// TODO: Implement load
59		setTimeout( () => {
60		new CoverImage( _this.$el );
		0 ignored issues – show Unused Code Best Practice introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(_this.$el)` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
61		}, 1000);
62
63		} else {
64		_this.resizeImage();
65		}
66
67		_this.$img.one('load', () => {
68		console.log('Image loaded:', 'resize');
		0 ignored issues – show Debugging Code introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
69		_this.resizeImage();
70		});
71
72		$(window).on('resize', () => {
73		_this.resizeImage();
74		});
75
76		$(window).on('ci.resize', () => {
77		_this.resizeImage();
78		});
79
80		if (_this.options.parallax) {
81		_this.draw();
82		}
83		}
84
85		/**
86		* Parallax FX
87		*
88		*/
89	View Code Duplication	draw() {
		0 ignored issues – show Duplication introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report This code seems to be duplicated in your project. Loading history...
90		const _this = this;
91		const friction = 0.5;
92		const imageOffsetX = document.body.scrollTop * friction;
93		const imageOffsetY = document.body.scrollTop * friction;
94		const maximumMovementY = ( _this.imageDimensions.height - _this.elementDimensions.height) * _this.positioning.y;
95		const maximumMovementX = ( _this.imageDimensions.width - _this.elementDimensions.width) * _this.positioning.x;
96
97		if ( maximumMovementX > 0 ) {
98		if (imageOffsetX < maximumMovementX ) {
99		// console.log('New position:', maximumMovementX - imageOffsetX);
100		_this.$img.css({
101		'transform': `translateX(${maximumMovementX - imageOffsetX}px)`
102		});
103		}
104
105		} else {
106		if ( imageOffsetY < maximumMovementY ) {
107		_this.$img.css('transform', `translateY(${maximumMovementY - imageOffsetY}px)`);
108		}
109		}
110
111		window.requestAnimationFrame(() => {
112		_this.draw();
113		});
114		}
115
116		getElementForSizing() {
117		const _this = this;
118		const selector = _this.$el.data('coverImageEl');
119
120		if ( selector ) {
121
122		console.log( 'Element selector Present', _this.$el.find( selector ) );
		0 ignored issues – show Debugging Code introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
123
124		return _this.$el.find( selector ) ? _this.$el.find( selector ) : _this.$el.find('img');
125		}
126
127		return _this.$el.find('img').first();
128		}
129
130		resizeImage() {
131		const _this = this;
132		const dimensions = _this.coverDimensions( _this.imageWidth, _this.imageHeight, _this.$el.outerWidth(), _this.$el.outerHeight() );
133
134		_this.imageDimensions = dimensions;
135
136
137		if ( isNaN( dimensions.width ) ) {
138		console.log('Failed to calculate image sizes.');
		0 ignored issues – show Debugging Code introduced 2017-02-07 18:28 UTC by Report Bug Copy Issue Report `console.log` looks like debug code. Are you sure you do not want to remove it? Loading history...
139		}
140
141		_this.setImageSize();
142		}
143
144		setImageSize() {
145		const _this = this;
146
147		_this.$img.attr({
148		'width' : _this.imageDimensions.width,
149		'height' : _this.imageDimensions.height
150		}).css({
151		'position' : 'absolute',
152		'width' : _this.imageDimensions.width,
153		'height' : _this.imageDimensions.height,
154		'transform' : _this.getTransform(
155		( _this.$el.width() - _this.imageDimensions.width) * _this.positioning.y,
156		( _this.$el.outerHeight() - _this.imageDimensions.height) * _this.positioning.x
157		),
158		'max-width' : 'none'
159		}).data('resrc-width', _this.imageDimensions.width);
160
161		_this.$img.addClass('ci--sized');
162
163		_this.cb();
164		}
165
166		getTransform(x, y) {
167		return `translate3d(${x}px,${y}px,0)`;
168		}
169
170		coverDimensions(child_w, child_h, container_w, container_h) {
171		const scale_factor = this.max( container_w / child_w, container_h / child_h );
172
173		return {
174		width: Math.ceil(child_w * scale_factor),
175		height: Math.ceil(child_h * scale_factor)
176		};
177		}
178
179		containDimensions(child_w, child_h, container_w, container_h) {
180		const scale_factor = this.min( container_w / child_w, container_h / child_h );
181
182		return {
183		width: child_w * scale_factor,
184		height: child_h * scale_factor
185		};
186		}
187
188		min(a, b) {
189		return a > b ? b : a;
190		}
191
192		max(a, b) {
193		return a > b ? a : b;
194		}
195		}
196
197		const elems = document.body.querySelectorAll('[data-cover-image]');
198
199		elems.forEach(el => {
200		new CoverImage( jQuery(el) );
		0 ignored issues – show Unused Code Best Practice introduced 2017-02-08 08:30 UTC by Report Bug Copy Issue Report The object created with `new CoverImage(jQuery(el))` is not used but discarded. Consider invoking another function instead of a constructor if you are doing this purely for side effects. Loading history...
201		});
202

thisislawatts / coverimage

Push — master ( af2b22...774afd )

coverimage.js ➔ ??? C

Complexity

Size

Duplication

Importance

1 Function

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like